<template>
  <div class="home">
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>连退2150平整机工艺参数优化模型</h1>
      </div>
    </div>
    <el-row class="main-container">
      <el-col :span="8">
        <el-header style="height: 10vh">
          <div class="alarm-info">
            <span class="alarm-icon">&#9888;</span>
            <span class="warning">报警信息</span>
            <div class="alarm-marquee">
              <span class="alarm-row-one-line marquee-text">
                {{ warningMessage }}
              </span>
            </div>
          </div>
        </el-header>
        <el-main style="height: 30vh">
          <svg-load :name="technologicalName" width="100%"></svg-load>
          <div class="steel-info-div">
            <div class="coil-div common-div-card">
              <span>卷号:&nbsp;&nbsp;{{ entId }}</span>
            </div>
            <div class="zcoiler-div common-div-card">
              <span>轧制力:&nbsp;&nbsp;{{ numberFormat1(zcoiler_remaining_length_b) }}&nbsp;&nbsp;KN</span>
            </div>
            <div class="ccoiler-div common-div-card">
              <span>窜辊:&nbsp;&nbsp;{{ numberFormat1(ccoiler_remaining_length_b) }}&nbsp;</span>
            </div>
            <div class="wcoiler-div common-div-card">
              <span>弯辊力:&nbsp;&nbsp;{{ numberFormat1(coiler_remaining_length_b) }}&nbsp;&nbsp;KN</span>
            </div>
            <div class="speed-div common-div-card">
              <span>平整机速度:&nbsp;&nbsp;{{ numberFormat1(flat_machine_speed) }}&nbsp;</span>
            </div>
          </div>
        </el-main>
        <el-footer style="height: 50vh">
          <new-coil-card title="钢卷信息" :class="viewportWidth == 1920 ? '' : 'base-info-125'">
            <el-table
              :data="pdiMesInfo"
              style="width: 100%"
              :header-cell-style="{ background: '#2f59af', color: '#fff' }"
              size="small"
              ref="alarmTableRef"
            >
              <el-table-column prop="chinese" label="" />
              <el-table-column prop="currentCoil" label="当前卷" />
              <el-table-column prop="nextCoil" label="下一卷" />
            </el-table>
          </new-coil-card>
        </el-footer>
      </el-col>
      <el-col :span="8">
        <el-header style="height: 30vh">
          <new-coil-card title="AI弯辊力补偿值">
            <graph-line :data1="wrbendForceCompensation" :datax="dataTimeX" :data-name="['时间', 'AI弯辊力补偿值']" />
          </new-coil-card>
        </el-header>
        <el-main style="height: 30vh">
          <new-coil-card title="轧制力曲线">
            <graph-line
              :data1="rollingLevelSet"
              :data2="rollingForceSet"
              :data3="percentage_rollingforce"
              :datax="dataTimeX"
              :data-name="['时间', 'KN']"
              :legend-name="['二级设定', 'AI模型设定', '实际值']"
            />
          </new-coil-card>
        </el-main>
        <el-footer style="height: 30vh">
          <new-coil-card title="中间辊弯辊力曲线">
            <graph-line
              :data1="inbendLevelSet"
              :data2="inbendForceSet"
              :data3="percentage_inbendforce"
              :datax="dataTimeX"
              :data-name="['时间', 'KN']"
              :legend-name="['二级设定', 'AI模型设定', '实际值']"
            />
          </new-coil-card>
        </el-footer>
      </el-col>
      <el-col :span="8">
        <el-header style="height: 30vh">
          <new-coil-card title="板形柱状图">
            <graph-bar :data1="flatnessBar" :datax="flatnessBarx" />
          </new-coil-card>
        </el-header>
        <el-main style="height: 30vh">
          <new-coil-card title="工作弯辊力曲线">
            <graph-line
              :data1="wrbendLevelSet"
              :data2="wrbendForceSet"
              :data3="percentage_wrbendforce"
              :datax="dataTimeX"
              :data-name="['时间', 'KN']"
              :legend-name="['二级设定', 'AI模型设定', '实际值']"
            />
          </new-coil-card>
        </el-main>
        <el-footer style="height: 30vh">
          <new-coil-card title="延伸率">
            <graph-line
              :data1="stretch_goals"
              :data2="percentage_elongation"
              :datax="dataTimeX"
              :data-name="['时间', '延伸率']"
              :legend-name="['目标值', '实际值']"
            />
          </new-coil-card>
        </el-footer>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
  import NewCoilCard from '/@/components/NewCoilCard/NewCoilCard.vue';
  import { ref, onMounted, onUnmounted, watch, onBeforeMount } from 'vue';
  import dayjs from 'dayjs';
  import { ElMessage } from 'element-plus';
  import { refreshSVG, initialSVG, refreshGraphical } from '/@/common/refreshSVG';
  import { useUserStore } from '/@/store/modules/system/user';
  import { levelingMachineApi } from '/@/api/levelingmachine/index';
  import { rollingSimulationApi } from '/@/api/RollingSimulation/index';
  import axios from 'axios';
  import GraphBar from './components/GraphBar.vue';
  import GraphLine from './components/GraphLine.vue';

  // ------------------------------------- 目录    -------------------------------------------

  const data = ref([
    {
      menuName: 'levelingmachines',
      menuTitle: '连退平整机工艺参数主页',
      menuId: '1',
    },
    { menuName: 'levelingmachineplan', menuTitle: '连退平整机工艺计划' },
    { menuName: 'historicalsetvalue', menuTitle: '历史卷轧制力，弯辊力AI设定值' },
  ]);

  onBeforeMount(() => {
    useUserStore().setTagNav(data.value);
  });

  // ----------------------------------- 警告信息 -------------------------------------------

  const warningMessage = ref('');

  const getWarningMessage = () => {
    try {
      let param = {};
      levelingMachineApi.findEarlyWarning(param).then((res) => {
        warningMessage.value =
          '时间:' +
          res.data.data.spmSetTime +
          ' 卷号:' +
          res.data.data.coilNo +
          ' 轧制力:' +
          res.data.data.rollingForce +
          ' 工作辊弯辊力:' +
          res.data.data.workRollBend +
          ' 中间辊弯辊力:' +
          res.data.data.interMediateRollBend +
          ' 随机系数:' +
          res.data.data.followUpCoefficient;
      });
    } catch (e) {
      console.error('获取警告信息失败：' + e);
      ElMessage.error('获取警告信息失败');
    }
  };

  // ----------------------------------- 钢卷跟踪 -------------------------------------------

  const inletLooper = ref<number>(0);
  const middleLooper = ref<number>(0);
  const exportLooper = ref<number>(0);
  const technologicalName = 'spm';
  let tr: any = null;
  let por: any = null;
  let ti: any = null;

  const getZoneTrk = async () => {
    let param = {
      name: 'CAL2150_zonetrk',
    };

    rollingSimulationApi.rest(param).then((res) => {
      let zones = res.data.zoneno;
      entId.value = zones[83].entId;
      inletLooper.value = res.data['loop'][0];
      middleLooper.value = res.data['loop'][1];
      exportLooper.value = res.data['loop'][2];
      let trKey = `${technologicalName}-ZONE_tr${res.data.tr}`;
      let trpathKey = trKey + '_path';
      let porKey = `${technologicalName}-ZONE_por${res.data.por}`;
      let porpathKey = porKey + '_path';
      var arr = Object.keys(zones);
      /**开卷机和卷取机 */
      if (tr === null || tr !== res.data.tr) {
        tr = res.data.tr;
        refreshSVG(zones[arr.length - 1].ti % 10, trpathKey);
        refreshGraphical(zones[arr.length - 1].ti % 10, trKey);
        initialSVG(technologicalName, 'tr', res.data.tr);
      }
      if (por === null || por !== res.data.por) {
        por = res.data.por;
        if (res.data.por === 0) {
          initialSVG(technologicalName, 'por', '1');
          initialSVG(technologicalName, 'por', '2');
        }
      }
      if (ti === null || ti !== zones[0].ti) {
        ti = zones[0].ti;
        refreshSVG(zones[0].ti % 10, porpathKey);
        refreshGraphical(zones[0].ti % 10, porKey);
        initialSVG(technologicalName, 'por', res.data.por);
      }
      for (let i in zones) {
        let pathkey = `${technologicalName}-ZONE${i}`;
        refreshSVG(zones[i].ti % 10, pathkey);
      }
    });
  };

  const entId = ref('');
  const zcoiler_remaining_length_b = ref<number>(8.0);
  const ccoiler_remaining_length_b = ref<String>('DC51D');
  const coiler_remaining_length_b = ref<number>(25.0);
  const flat_machine_speed = ref<number>(25.0);

  async function getAIModeTableData() {
    let param = {
      name: 'CAL2150_RealData',
    };
    rollingSimulationApi.rest(param).then((res) => {
      const obj = res.data;
      zcoiler_remaining_length_b.value = obj['G426_411NI'];
      ccoiler_remaining_length_b.value = obj['G426_421NI'];
      coiler_remaining_length_b.value = obj['G426_434NI'];
      flat_machine_speed.value = obj['G1_1801NI'];
    });
  }
  const numberFormat1 = (number: any) => {
    return number == undefined ? '0' : Number(parseFloat(number).toFixed(0));
  };

  // ----------------------------------- 钢卷信息 -------------------------------------------

  const pdiMesInfo = ref([
    { chinese: '卷号', currentCoil: '-', nextCoil: '-' },
    { chinese: '钢种', currentCoil: '-', nextCoil: '-' },
    { chinese: '宽度(mm)', currentCoil: '-', nextCoil: '-' },
    { chinese: '厚度(mm)', currentCoil: '-', nextCoil: '-' },
    { chinese: '轧制力AI设定值', currentCoil: '-', nextCoil: '-' },
    { chinese: '工作弯辊力AI设定值', currentCoil: '-', nextCoil: '-' },
    { chinese: '中间弯辊力AI设定值', currentCoil: '-', nextCoil: '-' },
    { chinese: '窜辊建议值', currentCoil: '-', nextCoil: '-' },
    { chinese: '置信度', currentCoil: '-', nextCoil: '-' },
  ]);

  async function getSteelGradeData() {
    const param = {
      action: 'get_tags',
      operator: 'abc',
      terminal: 'FM_01',
      body: [
        {
          tagName: 'GAL2_SPMDIR.CoilNo',
          timestamp: 0,
        },
        {
          tagName: 'GAL2_SPMDIR.Fspare1',
          timestamp: 0,
        },
        {
          tagName: 'GAL2_SPMDIR.Fspare2',
          timestamp: 0,
        },
        {
          tagName: 'GAL2_SPMDIR.Fspare5',
          timestamp: 0,
        },
        {
          tagName: 'GAL2_SPMDIR.Fspare10',
          timestamp: 0,
        },
        {
          tagName: 'current_trust_rate',
          timestamp: 0,
        },
        {
          tagName: 'next_coil_id',
          timestamp: 0,
        },
        {
          tagName: 'GAL2_SPMDIR.Fspare6',
          timestamp: 0,
        },
        {
          tagName: 'GAL2_SPMDIR.Fspare7',
          timestamp: 0,
        },
        {
          tagName: 'GAL2_SPMDIR.Fspare8',
          timestamp: 0,
        },
        {
          tagName: 'GAL2_SPMDIR.Fspare11',
          timestamp: 0,
        },
        {
          tagName: 'next_trust_rate',
          timestamp: 0,
        },
      ],
    };
    // 不再清空数组
    levelingMachineApi.LHMIN(param).then((res) => {
      let param2 = {
        entid: res.data.results[0].value,
      };
      levelingMachineApi.findProcessValue(param2).then((ress:any) => {

        pdiMesInfo.value[6].currentCoil = parseFloat(res.data.results[3].value).toFixed(0);
        pdiMesInfo.value[5].currentCoil = parseFloat(res.data.results[2].value).toFixed(0);
        pdiMesInfo.value[4].currentCoil = parseFloat(res.data.results[1].value).toFixed(0);
        pdiMesInfo.value[0].currentCoil = res.data.results[0].value;
        pdiMesInfo.value[1].currentCoil = ress.data.data.steelgrade;
        pdiMesInfo.value[2].currentCoil = ress.data.data.inMatWidth;
        pdiMesInfo.value[3].currentCoil = ress.data.data.inMatThick;
        pdiMesInfo.value[7].currentCoil = res.data.results[4].value;
        pdiMesInfo.value[8].currentCoil = res.data.results[5].value;
      });
      // let next;
      // for (let i = 82; i > 0; i--) {
      //   if (res.data['zoneno'][i]['entId'] != res.data['zoneno']['83']['entId']) {
      //     next = res.data['zoneno'][i]['entId'];
      //     break;
      //   }
      // }
      let param3 = {
        entid: res.data.results[6].value,
      };
      levelingMachineApi.findProcessValue(param3).then((ress:any) => {
        pdiMesInfo.value[6].nextCoil = parseFloat(res.data.results[9].value).toFixed(0);
        pdiMesInfo.value[5].nextCoil = parseFloat(res.data.results[8].value).toFixed(0);
        pdiMesInfo.value[4].nextCoil = parseFloat(res.data.results[7].value).toFixed(0);
        pdiMesInfo.value[0].nextCoil = res.data.results[6].value;
        pdiMesInfo.value[1].nextCoil = ress.data.data.steelgrade;
        pdiMesInfo.value[2].nextCoil = ress.data.data.inMatWidth;
        pdiMesInfo.value[3].nextCoil = ress.data.data.inMatThick;
        pdiMesInfo.value[7].nextCoil = res.data.results[10].value;
        pdiMesInfo.value[8].nextCoil = res.data.results[11].value;
      });
    });
  }

  // ----------------------------------- 图表相关 -------------------------------------------

  // --------------- 板形柱状图 -----------------
  const flatnessBar = ref<any>([]);
  const flatnessBarx = Array.from({ length: 32 }, (_, i) => i + 1);

  async function updateflatnessData() {
    const param = {
      name: 'CAL2150_RealData',
    };

    try {
      const res = await rollingSimulationApi.rest(param);
      const obj = res.data;

      // 生成键名数组
      const keys = Array.from({ length: 32 }, (_, i) => `G427_${(804 + i).toString().padStart(3, '0')}BR`).reverse();

      // 一次性更新所有值
      flatnessBar.value = keys.map((key) => obj[key]);
    } catch (error) {
      console.error('更新板形数据失败:', error);
    }
  }

  // --------------- AI弯辊力补偿值 -----------------

  const wrbendForceCompensation = ref<any>([]);
  const prewrbendForceCompensation = ref(0);

  const rollingForceSet = ref<any>([]);
  const rollingLevelSet = ref<any>([]);
  const inbendLevelSet = ref<any>([]);
  const inbendForceSet = ref<any>([]);
  const wrbendForceSet = ref<any>([]);
  const wrbendLevelSet = ref<any>([]);
  const percentage_wrbendforce = ref<any>([]);
  const percentage_inbendforce = ref<any>([]);
  const percentage_rollingforce = ref<any>([]);

  async function getRecForceLine() {
    let param = {
      name: 'CAL2150_RealData',
    };
    rollingSimulationApi.rest(param).then((res) => {
      rollingLevelSet.value.push(parseFloat(res.data.G401_513NI).toFixed(3));
      inbendLevelSet.value.push(parseFloat(res.data.G401_514NI).toFixed(3));
      wrbendLevelSet.value.push(parseFloat(res.data.G401_326DS_VAL).toFixed(3));
      percentage_rollingforce.value.push(parseFloat(res.data.G426_411NI).toFixed(3));
      percentage_wrbendforce.value.push(parseFloat(res.data.G426_434NI).toFixed(3));
      percentage_inbendforce.value.push(parseFloat(res.data.G401_554NI).toFixed(3));
      let rollingforce: number = res.data['G426_411NI'] - prewrbendForceCompensation.value;

      const param = {
        action: 'get_tags',
        operator: 'abc ',
        terminal: 'FM_01',
        body: [
          {
            tagName: 'GAL2_SPMDIR.CoilNo',
            timestamp: 0,
        }],
      };
      levelingMachineApi.LHMIN(param).then((res) => {
        console.log("data"+res.data)
        let param2 = {
          entid: res.data.results[0].value,
        };
        levelingMachineApi.findProcessValue(param2).then((res) => {
          wrbendForceCompensation.value.push((rollingforce * res.data.data.workRollBendComp).toFixed(3));
        });
      });
      prewrbendForceCompensation.value = res.data.G426_411NI;
    });
  }

  async function searchButtonClick() {
    const param = {
      action: 'get_tags',
      operator: 'abc ',
      terminal: 'FM_01',
      body: [
        {
          tagName: 'GAL2_SPMDIR.Fspare1',
          timestamp: 0,
        },
        {
          tagName: 'GAL2_SPMDIR.Fspare2',
          timestamp: 0,
        },
        {
          tagName: 'GAL2_SPMDIR.Fspare5',
          timestamp: 0,
        },
      ],
    };

    levelingMachineApi.LHMIN(param).then((res) => {
      const obj = res.data;
      rollingForceSet.value.push(obj.results[0].value.toFixed(3));
      wrbendForceSet.value.push(obj.results[1].value.toFixed(3));
      inbendForceSet.value.push(obj.results[2].value.toFixed(3));
    });
  }

  // --------------- 延伸率 -----------------
  const percentage_elongation = ref<any>([]);
  const stretch_goals = ref<any>([]);

  async function getElongationData() {
    let param = {
      name: 'CAL2150_RealData',
    };
    rollingSimulationApi.rest(param).then((res) => {
      stretch_goals.value.push(Number(parseFloat(res.data['G401_583NI'])).toFixed(2));
      percentage_elongation.value.push(Number(parseFloat(res.data['spm_elongation_act'])).toFixed(2));
      // console.log(percentage_elongation.value.length);
    });
  }

  // ----------------------------------- 共通设定 -------------------------------------------
  const dataTimeX = ref<string[]>([]);
  let interval2000: any = null;
  let interval500: any = null;
  const viewportWidth = ref();
  const viewportHeight = ref();

  function fetchData() {
    try {
      interval2000 = setInterval(() => {
        getWarningMessage();
        // getSteelGradeData();
        getZoneTrk();
        updateflatnessData();
        getRecForceLine();
        searchButtonClick();
        getElongationData();
        getAIModeTableData();
        dataTimeX.value.push(dayjs().format('HH:mm:ss'));
      }, 2000);
      interval500 = setInterval(() => {
        getSteelGradeData();
      }, 500);
    } catch (error: any) {
      console.error('error:' + error);
      ElMessage.error('获取数据失败');
    }
  }

  onMounted(() => {
    fetchData();
    viewportWidth.value = window.innerWidth;
    viewportHeight.value = window.innerHeight;
  });

  onUnmounted(() => {
    dataTimeX.value = [];
    stretch_goals.value = [];
    percentage_elongation.value = [];
    percentage_rollingforce.value = [];
    rollingLevelSet.value = [];
    rollingForceSet.value = [];
    pdiMesInfo.value = [];
    wrbendForceCompensation.value = [];
    inbendForceSet.value = [];
    inbendLevelSet.value = [];
    percentage_inbendforce.value = [];
    clearInterval(interval2000);
    clearInterval(interval500);
  });

  watch(
    () => {
      return dataTimeX.value.length;
    },
    () => {
      if (dataTimeX.value.length > 60) {
        dataTimeX.value.shift();
        stretch_goals.value.shift();
        percentage_elongation.value.shift();
        percentage_rollingforce.value.shift();
        rollingLevelSet.value.shift();
        rollingForceSet.value.shift();
        percentage_wrbendforce.value.shift();
        percentage_inbendforce.value.shift();
        wrbendLevelSet.value.shift();
        inbendLevelSet.value.shift();
        wrbendForceSet.value.shift();
        inbendForceSet.value.shift();
        wrbendForceCompensation.value.shift();
      }
    }
  );
</script>
<style scoped lang="less">
  // 表格和选择框共同样式
  @border-radius: 8px;
  @primary-color: #2c69e8;
  @box-shadow: 0 4px 16px rgba(255, 255, 255, 0.08);
  @box-shadow-hover: 0 8px 32px rgba(255, 255, 255, 0.12);
  @border:1px solid #dcdfe6;
  .main-container {
    height: 90vh;
    width: 99vw;
    // ---------------------  table ---------------
    :deep(.el-table) {
      background-color: transparent !important;
      --el-table-border: none;
      --el-table-row-hover-bg-color: unset;
      color: white;
      font-size: 14px;
    }

    :deep(.el-table th),
    :deep(.el-table tr),
    :deep(.el-table td) {
      background-color: transparent;
    }

    :deep(.el-table__row:nth-child(odd)) {
      background-color: #223671;
    }

    :deep(.el-table__inner-wrapper::before) {
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0;
    }

    :deep(.el-table) {
      .el-table__cell {
        .cell {
          align-items: center;
          text-align: center;
          white-space: nowrap; // 禁止换行
          text-overflow: ellipsis; // 溢出显示...
          line-height: 2.3;
        }
      }
    }

    // ------------------------------  select  ----------
    :deep(.el-select .el-select__wrapper) {
      background-color: rgba(41, 121, 255, 0.2) !important;
      border: 1px solid #42b4ff !important;
      box-shadow: 0 0 8px rgba(41, 121, 255, 0.5) !important;
      height: 22px !important;
      width: auto !important;
      border-radius: 3px !important;
      transition: border-color 0.2s;
    }
    :deep(.el-select .el-input__inner) {
      height: 20px !important;
      line-height: 20px !important;
      font-size: 14px !important;
      color: #fff !important;
      padding: 0 10px;
      background: transparent !important;
    }
    :deep(.el-select .el-select__caret) {
      font-size: 14px !important;
      color: #42b4ff;
    }
    :deep(.el-select .el-select__placeholder) {
      font-size: 14px !important;
      color: #a0a3a8 !important;
    }
    :deep(.el-select:hover .el-select__selected-item) {
      background-color: transparent !important;
    }

    :deep(.el-select-dropdown) {
      background-color: #142a52 !important;
      border: 1px solid #2a5caa !important;
    }
    :deep(.el-select-dropdown__item) {
      color: #a2cfff !important;
      background-color: #142a52 !important;
    }
    :deep(.el-select-dropdown__item.selected) {
      background-color: #1890ff !important;
      color: #fff !important;
    }
    :deep(.el-select-dropdown__item.hover) {
      background-color: #1e3a6d !important;
      color: #fff !important;
    }
  }

  // ---------------- 报警信息 --------------------
  .alarm-info {
    height: 3vh;
    display: flex;
    align-items: center;
    background: #3e1b3c;
    border: 1px solid #ff4d4f;
    border-radius: 4px;
    color: #fff;
    min-width: 350px;
    max-width: 600px;
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.08);
    padding: 5px;
  }

  .alarm-icon {
    font-size: 20px;
    color: #ff4d4f;
  }
  .warning {
    color: red;
    font-size: 16px;
    width: 5vw;
    margin-left: 5px;
  }

  .alarm-marquee {
    overflow: hidden;
    width: 100%;
    height: 28px;
    position: relative;
    display: flex;
    align-items: center;
  }

  .alarm-row-one-line.ellipsis {
    display: inline-block;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    margin-top: 8px;
  }

  .marquee-text {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 18s linear infinite;
    font-size: 15px;
    font-weight: 500;
    padding-left: 10px;
  }
  @keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  // ---------------- 钢卷跟踪信息 --------------------

  .coil-div {
    position: absolute;
    left: 3vw;
    top: 6vh;
    height: 3vh;
    display: flex;
    align-items: center;
    padding: 5px;
  }

  .zcoiler-div {
    position: absolute;
    left: 13vw;
    top: 6vh;
    height: 3vh;
    display: flex;
    align-items: center;
    padding: 5px;
  }

  .ccoiler-div {
    position: absolute;
    left: 23vw;
    top: 6vh;
    height: 3vh;
    display: flex;
    align-items: center;
    padding: 5px;
  }

  .wcoiler-div {
    position: absolute;
    left: 8vw;
    top: 14vh;
    height: 3vh;
    display: flex;
    align-items: center;
    padding: 5px;
  }

  .speed-div {
    position: absolute;
    left: 18vw;
    top: 14vh;
    height: 3vh;
    display: flex;
    align-items: center;
    padding: 5px;
  }

  .common-div-card {
    box-shadow: @box-shadow;
    transition: 0.3s;
    border-radius: @border-radius;
    // border: @border;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: #063e90;
    transition: all 0.3s ease;
    cursor: pointer; // 添加指针样式

    // 悬停状态
    &:hover {
      box-shadow: @box-shadow-hover;
      transform: translateY(-5px); // 添加上浮效果
      background: lighten(#063e90, 10%); // 背景色变亮
      border-color: lighten(#dcdfe6, 20%); // 边框变亮
    }
  }
</style>
